import React, {useState, useEffect} from 'react'
import { Tabs } from 'antd-mobile'
import { Cross } from '@react-vant/icons'
import request from '@services/request'
import '../styles/extractModal.less'
import { Toast } from 'react-vant'

const ExtractModal = (props) => {
  const [tab, setTab] = useState('usdt')
  const [usdtValue, setUsdtValue] = useState('')
  const [nanaValue, setNanaValue] = useState('')
  const [address, setAddress] = useState('')

  useEffect(() => {
  }, [])

  const { publicKey, signMessage } = JSON.parse(localStorage.getItem('biwSign') || '{}')

  const submit = async () => {
    if (tab === 'usdt' && (usdtValue < props.state.withdrawMin || usdtValue > props.state.withdrawMax)) {
      return Toast.info(`数量必须大于${props.state.withdrawMax}且大于${props.state.withdrawMin}`)
    }
    if (tab === 'nana' && (usdtValue < props.state.withdrawMinNa || usdtValue > props.state.withdrawMaxNa)) {
      return Toast.info(`数量必须大于${props.state.withdrawMax}且大于${props.state.withdrawMin}`)
    }
    if (!address) {
      return Toast.info('请输入提币地址')
    }

    const params = {
      type: tab,
      amount: tab === 'usdt' ? Number(usdtValue) : Number(nanaValue),
      sign: signMessage,
      publicKey: publicKey,
      address
    }

    try {
      const res = await request.post("app_server/withdraw", params);

      props.onClose && props.onClose()
    } catch (error) {
      console.log(error)
    }
  }

  const onChange = (key) => {
    setTab(key)
  }

  return (
    <div className="extract-modal">
      <div className="extract-main">
        <Tabs onChange={onChange}>
          <Tabs.Tab title='USDT提币' key='usdt'>
            <input
              type="number"
              className="extract-input"
              placeholder='请输入数量'
              value={usdtValue}
              onChange={(e) => {
                setUsdtValue(e.target.value)
              }}
            />
          </Tabs.Tab>
          <Tabs.Tab title='NANA提币' key='nana'>
            <input
              type="number"
              className="extract-input"
              placeholder='请输入数量'
              value={nanaValue}
              onChange={(e) => {
                setNanaValue(e.target.value)
              }}
            />
          </Tabs.Tab>
        </Tabs>
        <p style={{marginBottom: 10}}>提币地址:</p>
        <input
          type="text"
          className="extract-input"
          placeholder='请输入地址'
          value={address}
          onChange={(e) => {
            setAddress(e.target.value)
          }}
        />
        <button className="extract-btn" onClick={() => submit()}>确定</button>
        <Cross className="cross-btn" onClick={() => props.onClose && props.onClose()} />
      </div>
    </div>
  )
}

export default ExtractModal;